<!-- 
  使用 自定义指令 实现一个 v-copy 的指令，基于 clipboard

    1. npm 安装 clipboard
      npm install clipboard

    2. 思考做成全局的还是局部的
      全局

      考虑后续会还有 auth 指令，所以创建一个文件夹统一存放

 -->

<script>
import { h } from 'vue'

export default {
  data() {
    return {
      name: '张三',
      list: ['苹果', '香蕉', '橘子'],
      person: {
        name: '张三',
        age: 18,
      },
    }
  },

  methods: {
    fn1() {
      this.list[1] = '西瓜'
    },

    fn2() {
      this.person.sex = '男'
    },
  },

  updated() {
    console.log('App updated')
  },

  /**
   * 渲染函数，
   *  Vue2中，render 可以收到 createElement 这个参数
   *  Vue3中，render 没有参数，需要使用 createElement 的话，得主动从 vue 中导入 h 函数来使用
   */
  render() {
    // const foo = 'box1'
    // const bar = true

    return h(
      'div',
      {
        onClick: () => {
          alert('点击了')
        },
      },
      'hello'
    )
  },
}
</script>
